<template>
  <!-- 商品页面 -->
  <div class="page-wrap">
    <!-- 骨架屏 -->
    <div>
      <skeleton :skeletonFlag="skeletonFlag"></skeleton>
    </div>
    <!-- 轮播图，微信原生 -->
    <div class="swiperContainer">
      <swiper class='swiper'
        autoplay='true'
        interval='5000'
        duration='1000'
        circular="true"
        current="0"
        @change="swiperCurrent"
        @bindchange="swiperCurrent"
      >
        <block v-for='(imgurl, index) in swiperData' :index='index' :key='index'>
          <swiper-item class="swiper-wrap">
            <!-- 使用了原生的缩放功能，图高超出会被剪裁 -->
            <image :src='imgurl' class='swiper-image' mode='aspectFill'/>
            <!-- 轮播标题  -->
            <!-- <view class='swiper-textwrap'>
              <text class="title">sadfasdfsdaf</text>
            </view> -->
          </swiper-item>
        </block>
      </swiper>
      <!-- 轮播图图片数量显示 -->
      <div class="imageCount">
        {{current}}/{{swiperLen}}
      </div>
      <!-- 轮播分享 -->
      <div class="share">
        <button open-type="share" class="share-btn">
        </button>
        <img class="share-icon" src="/static/images/icon_share.png" >
      </div>
    </div>

    <!-- 头标题及价格 -->
    <div class="producti-panel-wrap">
      <!-- 价格 -->
      <div class="price-wrap">
        <h1 class="price">{{MoneySymbol}}{{goodsData.price}}</h1>
        <span class="oldprice">{{MoneySymbol}}{{goodsData.oldprice}}</span>
        <span class="bulk" v-show="bulk">团购价</span>
      </div>
      <!-- 标题 -->
      <div class="goods-contant">
        <div class="goods-title-wrap">
          <h1 class="goods-title">{{goodsData.title}}
            <span class="icon-refund">极速退款</span>
          </h1>
          <!-- <div class="btn-buy">
            <div class="btn">团购特惠</div>
          </div> -->
        </div>

        <!-- 标签显示 -->
        <tags :tags="goodsData.tags"></tags>

      </div>
    </div>

    <van-panel title="商品详情" custom-class="panel">
      <!-- <view class="content"></view> -->
      <wxParse :content="goodsData.article" className="content" />
    </van-panel>

    <!-- 底部购买按钮 -->
    <van-goods-action custom-class="goods-bottom-wrap">
      <!-- <van-goods-action-icon icon="wap-home" text="首页" @click.stop="toHome"/> -->
      <!-- 使用微信原生客服类型，直接定义类型即可 -->
      <van-goods-action-icon
        icon="chat-o"
        icon-class="icon-wrap"
        text-class="icon-wrap"
        text="客服"
        open-type="contact"
      />
      <!-- <van-goods-action-icon icon="contact" text="我的" @click.stop="toUser"/> -->

      <!-- 小购物车带数量显示，二版本（没数量时显示另一种） -->
      <van-goods-action-icon
        icon="cart-o"
        icon-class="icon-wrap"
        text-class="icon-wrap"
        text="购物车"
        v-if="totalNumALl>0? true : false"
        :info="totalNumALl"
        @click.stop="toShoppingCart"
      />
      <!-- 没有数量版本提示 -->
      <van-goods-action-icon
        icon="cart-o"
        icon-class="icon-wrap"
        text-class="icon-wrap"
        text="购物车"
        v-else-if="totalNumALl<=0? true : false"
        @click.stop="toShoppingCart"
      />
      <van-goods-action-button
        custom-class="goods-btn-left"
        text="加入购物车"
        type="warning"
        @click.stop="addCart"
      />
      <van-goods-action-button
        custom-class="goods-btn-right"
        text="立即购买" @click.stop="goBuy"
      />
    </van-goods-action>

    <!-- 加入购物车弹出层 -->
    <div>
      <!-- 绑定ref事件，用于父页面去触发子组件的函数 -->
      <cardPopup ref="refShowPage" :goodsData="goodsData" :goodsList="goodsList" />
    </div>
  </div>
</template>

<script>
import wxParse from 'mpvue-wxparse' // 富文本解析
import {
  fetch, bindViewTap, hideLoading, closeSkeleton, flagUserToPage
} from '@/utils/index' // 引入公用库
import TYPES from '@/constant/index' // 常量文件
import { getUrl } from '@/utils/api' // 请求封装公用库
import store from '@/utils/store' // 全局状态管理
// 以下引入封装的组件
import tags from '@/components/tags'
import cardPopup from '@/components/cardPopup'
import skeleton from '@/components/skeleton'

export default {
  data () {
    return {
      swiperData: [], // 商品轮播数据
      swiperLen: 1, // 轮播总数量
      current: 1, // 轮播当前数量
      MoneySymbol: TYPES.goodsData.MoneySymbol, // 存金额前缀符号
      goodsData: {}, // 商品数据（页面显示用）
      goodsList: [], // 每个规格商品数据（最终购买要用的）
      tags: [], // 商品标签
      addCartShow: true,
      bulk: false, // 控制团购标签显示的
      // 底部按钮icon图标
      bottomIcon: {
        customerService: '@/static/tabs/menu_customerService_active.png',
        shoppingCart: '@/static/tabs/menu_shopping_active.png'
      },
      skeletonFlag: true // 骨架屏层控制
    }
  },
  components: {
    tags, wxParse, cardPopup, skeleton
  },
  // 计算属性
  computed: {
    // 总购物数量
    totalNumALl () {
      let data = store.state.goodsData
      let numAll = 0 // 总数
      for (let i = 0; i < data.length; i++) {
        numAll += data[i]['num']
      }
      return numAll
    }
  },
  // 在el（元素DOM）挂载开始之前被调用
  beforeMount () {
    // 重置上次进入页面后，还存留的变量数据
    // this.skeletonFlag = true // 重置骨架屏状态
    // this.bulk = false // 重置团购标签是否显示
  },
  // 小程序生命周期-页面离开时触发
  onUnload () {
    // 重置上次进入页面后，还存留的变量数据
    this.skeletonFlag = true // 重置骨架屏状态
    this.bulk = false // 重置团购标签是否显示
  },
  // 每次页面加载的时候都会触发
  mounted () {
    // 请求轮播数据，启用了加载层遮罩层
    fetch(getUrl(`/prodpage?id=${this.$mp.query.id}`)).then(data => {
      let pageData = data.data
      // 保存轮播图数据
      this.swiperData = pageData.swiper
      this.swiperLen = pageData.swiper.length
      // 商品页面信息数据--容错处理
      this.goodsData = {
        title: pageData.product.title || '', // 商品标题
        price: pageData.product.price || 0, // 价格
        oldprice: pageData.product.oldprice || 0, // 旧价格
        link: pageData.product.link || 0, // 商品ID跳转用
        thumb: pageData.product.thumb || '', // 商品缩图
        tags: pageData.product.tags || ['全场包邮', '7天退换', '24小时发货', '上门安装'],
        article: pageData.product.article || '' // 商品介绍
      }
      // 购买商品规格数据（包括价格）
      this.goodsList = pageData.productList
      console.log('商品数据', this.goodsList)
    }).then(() => {
      // 关闭遮罩层加载中，公用库内的方法（封装好的）
      hideLoading(300)
    }).then(() => {
      // 关闭骨架屏
      closeSkeleton(this)
    })
    console.log('测试id:', this.$mp.query.id)
    this.bulk = this.$mp.query.bulk
    console.log('检测团购:', typeof this.$mp.query.bulk)
  },

  // 自定义函数
  methods: {
    // 手动或自动划动轮播图时，调整当前图数量显示
    swiperCurrent (e) {
      this.current = e.target.current + 1
    },
    // 轮播图上的分享
    toShare () {
      wx.showShareMenu({
        withShareTicket: true
      })
    },
    // 立即购买按钮事件
    goBuy (e) {
      // 验证用户登陆，没登陆会跳转授权登陆页面
      if (flagUserToPage()) {
        // 触发子组件的函数，弹出层选择商品颜色
        this.$refs.refShowPage.openTags({
          // 传入参数，需要触发的store事件，以及是否跳转页面
          dispatchName: 'payData',
          viewUrl: '../buyPage/main?arrFlag=payData'
        })
      }
    },
    // 加入购物车按钮
    addCart () {
      // 触发子组件的函数，弹出层选择商品颜色
      this.$refs.refShowPage.openTags({dispatchName: 'changeSelectFoods'})
    },
    // 跳转首页事件
    toHome () {
      bindViewTap('../index/main')
    },
    // 跳转个人中心
    toUser () {
      bindViewTap('../user/main')
    },
    // 跳转到购物车页面
    toShoppingCart () {
      bindViewTap('../shoppingCart/main')
    }
  },
  // 用户点击右上角分享
  onShareAppMessage: function (res) {
    // 返回分享数据
    return {
      title: this.goodsData.title,
      // path: 'pages/page/page?id=' + this.goodsData.link,
      imageUrl: this.swiperData[0]
    }
  }
}
</script>

<style>
@import url("~mpvue-wxparse/src/wxParse.css");

/* 商品详情页 */
.panel {
  margin-top: 5px;
}
.panel .content {
  padding: 0 30rpx;
  box-sizing: border-box;
}
.page-wrap {
  height: 100%;
  background: #E8E8E8;
}
/* 轮播图样式 */
.swiperContainer {
  position: relative;
}
.swiper {
  text-align: center;
  font-weight: normal;
  font-size: 30rpx;
  height: 360rpx;
  line-height: 30rpx;
  color: #757575;
}
.swiper-wrap {
  position: relative;
  height: 360rpx;
}
.swiper-image {
  width: 100%;
}
.swiper-image image{
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
/* 轮播标题框架 */
.swiper-textwrap {
  position: absolute;
  overflow: hidden;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  line-height: 180rpx;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #fff;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0)0%, rgba(63, 76, 88, 0.3)100%);
}
/* 图片数量显示 */
.imageCount{
  position: absolute;
  right: 26rpx;
  bottom:20rpx;
  width: 80rpx;
  height: 80rpx;
  line-height: 78rpx;
  border-radius: 50%;
  text-align: center;
  font-size: 26rpx;
  color: #414141;
  background-color: #c5c5cc;
  opacity: .5;
}
/* 轮播分享 */
.share {
  position:absolute;
  top: 20rpx;
  right: 30rpx;
  width: 56rpx;
  height: 56rpx;
}
.share-btn {
  position: absolute;
  width: 48rpx;
  height: 48rpx;
  z-index: 999;
  opacity: 0;
}
.share .share-icon {
  width: 48rpx;
  height: 48rpx;
}

/* 商品基础介绍 */
.producti-panel-wrap {
  padding: 0 18rpx;
  /* height: 240rpx; */
  box-sizing: border-box;
  background: #fff;
  color: #000;
}
/* 价格 */
.price-wrap {
  display: flex;
  height: 58rpx;
  line-height: 58rpx;
  font-size: 40rpx;
}
.price-wrap .price {
  color: #E51C23;
}
.price-wrap .oldprice {
  padding-left: 18rpx;
  font-size: 24rpx;
  text-decoration: line-through;
}
/* 价格-团购tag */
.price-wrap .bulk {
  margin: 9rpx 0 0 18rpx;
  width: 90rpx;
  height: 44rpx;
  line-height: 44rpx;
  padding: 0 10rpx;
  border-radius: 10rpx;
  text-align: center;
  font-size: 30rpx;
  background: #E2C573;
  /* background-image: linear-gradient(110deg, #CA9D52 0,
    #EEE697, #E8BB58 , #EEE697 , #CA9D52 100%); */
}

/* 标题及购买区域介绍 */
/* .goods-contant {} */
.goods-title-wrap {
  display: flex;
  font-size: 32rpx;
  padding-bottom: 8rpx;
  border-bottom: 1px solid #ccc;
}
.goods-title {
  flex: 1;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
  margin-right: 66rpx;
  line-height: 48rpx;
}
.icon-refund {
  display: inline-block;
  padding-left: 6rpx;
  font-size: 28rpx;
  color: #259B24;
}
/* 标题区，右边暂时不用 */
.goods-contant .btn-buy {
  /* 空间占100px,0不缩放,最大宽度-可百分比 */
  position: relative;
  flex: 140rpx 0 140rpx;
}
.goods-contant .btn-buy .btn {
  position: absolute;
  top: 2rpx;
  right: 4rpx;
  padding: 10rpx 5rpx;
  width: 90rpx;
  text-align: center;
  /* border-radius: 50%; */
  background: #E2C573;
}
/* 底部区域 */
.goods-bottom-wrap {
  background: #000;
}
/* 小图标样式 */
.icon-wrap {
  color: #E2C573;
}
/* 改强UI组件的样式，没暴露更改 */
.goods-bottom-wrap .van-button--default {
  background: #000 !important;
}
.goods-bottom-wrap .van-info {
  border: none !important;
}
.goods-bottom-wrap .goods-btn-left, .goods-bottom-wrap .goods-btn-right{
  border: none !important;
  /* font-weight: bold !important; */
  color: #000 !important;
}
.goods-bottom-wrap .goods-btn-left {
  background: #F2E2B8 !important;
}
.goods-bottom-wrap .goods-btn-right {
  background: #E2C573 !important;
}
</style>
